import * as React from 'react';
import { fromEvent } from 'rxjs';
import { debounceTime } from 'rxjs/operators';
import './App.css';
// throttleTime
import logo from './logo.svg';

const Heigher = (text:string) => (props:any) => <div><p>{text}</p>{props}</div>


class App extends React.Component<any,any> {
  
  
  public constructor(props:any){
    super(props)
    this.state = {
      x: 0,
      y: 0,
    }

  }
  public componentDidMount() {
    fromEvent(document, 'mousemove').pipe(debounceTime(100)).subscribe((ev:any) => this.setState({x: ev.pageX, y: ev.pageY}))
  }
  public render() {
    const hi = Heigher('123')
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.tsx</code> and save to reload.
        </p>
        {/* <Rxjs /> */}
        {hi(<div>{`${this.state.x}, ${this.state.y}`}</div>)}
      </div>
    );
  }
}

export default App;
